* {
  margin: 0;
  padding: 0; }

li {
  list-style: none; }

html {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative; }

#loading {
  width: 100vw;
  height: 100vh;
  background: darkred;
  position: relative; }
  #loading .LOAD {
    position: absolute;
    z-index: 10;
    top: 45vh;
    left: 25vw;
    color: yellow;
    font-size: 1rem; }
  #loading .loadingpercent {
    position: absolute;
    z-index: 10;
    color: white;
    font-size: 1rem;
    top: 45vh;
    right: 28vw; }
  #loading .loadingtext {
    float: left;
    width: 56vw;
    position: absolute;
    top: 12vh;
    left: 0;
    z-index: 1; }
  #loading .loadingtop {
    float: left;
    width: 100vw;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2; }
  #loading .loadingbottom {
    float: left;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw; }

#bgr {
  display: none;
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh; }
  #bgr .headimg {
    z-index: 16;
    width: 80vw;
    height: 25vh;
    position: absolute;
    top: 10px;
    left: 12vw; }
  #bgr .powerwrap {
    position: absolute;
    bottom: 10vh;
    left: 0;
    width: 96vw;
    height: 5vh;
    padding: 0 2vw;
    z-index: 3; }
  #bgr .powerhidden {
    position: relative;
    z-index: 2;
    height: 5vh;
    position: absolute;
    bottom: 10vh;
    left: 0;
    width: 0;
    overflow: hidden; }
  #bgr .power {
    height: 5vh;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 96vw;
    padding: 0 2vw; }
  #bgr .bg {
    width: 100vw;
    height: 100vh; }
  #bgr .begin {
    float: left;
    position: absolute;
    bottom: 30vh;
    left: 0;
    width: 100vw;
    height: 20vh; }
  #bgr .pao {
    float: left;
    position: absolute;
    bottom: 30vh;
    left: 100vw;
    width: 85vw;
    height: 25vh; }
  #bgr #cloud {
    z-index: 2;
    position: relative;
    position: absolute;
    float: left;
    top: 8vh;
    left: 0;
    width: 100vw;
    height: 24vh; }
    #bgr #cloud li img {
      width: 100vw;
      height: 24vh; }
    #bgr #cloud li:first-of-type {
      position: absolute;
      top: 0;
      left: 0; }
    #bgr #cloud li:nth-of-type(2) {
      position: absolute;
      top: 0;
      left: 100vw; }
    #bgr #cloud li:nth-of-type(3) {
      position: absolute;
      top: 0;
      left: 200vw; }
  #bgr #xingxing {
    z-index: 1;
    position: relative;
    position: absolute;
    float: left;
    top: 8vh;
    left: 0;
    width: 100vw;
    height: 22vh; }
    #bgr #xingxing li img {
      width: 100vw;
      height: 22vh; }
    #bgr #xingxing li:first-of-type {
      position: absolute;
      top: 0;
      left: 0vw; }
    #bgr #xingxing li:nth-of-type(2) {
      position: absolute;
      top: 0;
      left: 100vw; }
  #bgr #paodao {
    position: relative;
    position: absolute;
    float: left;
    bottom: 30vh;
    left: 0;
    width: 100vw;
    height: 24vh; }
    #bgr #paodao li img {
      width: 100vw;
      height: 24vh; }
    #bgr #paodao li:first-of-type {
      display: none;
      position: absolute;
      top: 0;
      left: 0; }
    #bgr #paodao li:nth-of-type(2) {
      position: absolute;
      top: 0;
      left: 100vw; }
    #bgr #paodao li:nth-of-type(3) {
      position: absolute;
      top: 0;
      left: 200vw; }
  #bgr #bear {
    position: relative;
    position: absolute;
    float: left;
    bottom: 52vh;
    left: 20vw;
    z-index: 10; }
    #bgr #bear .bear {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 9;
      width: 6.5rem;
      height: 5rem; }
    #bgr #bear .zhentou {
      position: absolute;
      z-index: 8;
      top: 1rem;
      left: 0.5rem;
      width: 4.5rem;
      height: 3rem; }
  #bgr .clearfix {
    clear: both; }
  #bgr .end {
    position: absolute;
    width: 100%;
    height: 20vh;
    bottom: 30vh;
    left: 100vw; }

#ready {
  -webkit-transition: all 500ms linear;
  transition: all 500ms linear;
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 111; }
  #ready .mengban {
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: 11;
    background: royalblue;
    opacity: 0.45; }
  #ready .tips1 {
    width: 70vw;
    height: 20vh;
    position: absolute;
    top: 30vh;
    left: 15vw;
    z-index: 12; }
  #ready .headimg {
    z-index: 16;
    width: 80vw;
    height: 25vh;
    position: absolute;
    top: 10px;
    left: 12vw; }

#again {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 100vw;
  z-index: 99; }
  #again .zhegai {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 4;
    background: black;
    opacity: 0.55; }
  #again .chengji img:first-of-type {
    position: absolute;
    top: 20vh;
    left: 5vw;
    z-index: 5;
    width: 90vw;
    height: 30vh; }
  #again .chengji img:nth-of-type(2) {
    position: absolute;
    top: 60vh;
    left: 5vw;
    z-index: 5;
    width: 37vw;
    height: 7vh; }
  #again .chengji img:nth-of-type(3) {
    position: absolute;
    top: 60vh;
    right: 5vw;
    z-index: 5;
    width: 37vw;
    height: 7vh; }
  #again .chengji p:first-of-type {
    position: absolute;
    top: 34vh;
    left: 21vw;
    z-index: 5;
    font-size: 30px;
    color: aliceblue; }
  #again .chengji p:last-of-type {
    position: absolute;
    top: 34vh;
    right: 21vw;
    z-index: 5;
    font-size: 30px;
    color: white; }
